import React from 'react'
import { bindActionCreators } from 'redux'
import { Breadcrumb } from 'antd'
import { connect } from 'react-redux'
import { withRouter } from 'react-router'
import { updateNavPath } from '../../actions/menu'
import {findMenuByUrl} from "../../utils";

import './index.less'

class NavPath extends React.Component {
  constructor (props) {
    super(props)
  }

  render () {
    const { items, navpath ,location} = this.props;
    let pathname = location.pathname;
    let selectMenu = findMenuByUrl(items,pathname);
    if(items==null || items.length<=0){
      return (
        <Breadcrumb style={{ margin: '12px 1px' }}>
          <Breadcrumb.Item key='bc-0'>首页</Breadcrumb.Item>
        </Breadcrumb>
      );
    }
    let locationNav = [];
    if(navpath.length<=0 && selectMenu){
      locationNav.push({
        key:selectMenu.parent.parent.id,
        name:selectMenu.parent.parent.name
      });
      locationNav.push({
        key:selectMenu.parent.id,
        name:selectMenu.parent.name
      });
      locationNav.push({
        key:selectMenu.id,
        name:selectMenu.name
      });
    }
    const bread = (navpath.length>0?navpath:locationNav).map((item)=>{
      return (
        <Breadcrumb.Item key={'bc-'+item.key}>{item.name}</Breadcrumb.Item>
      )
    })
    return (
      <Breadcrumb style={{ margin: '12px 1px' }}>
        <Breadcrumb.Item key='bc-0'>首页</Breadcrumb.Item>
        {bread}
      </Breadcrumb>
    )
  }
}

function mapStateToProps(state) {
  return {
    items: state.menu.items,
    navpath: state.menu.navpath
  }
}

export default withRouter(connect(mapStateToProps)(NavPath))
